<!-- 头组件 -->
<template>
  <header
    class="header"
    :style="{
      height: themeStore.getHeaderHeight + 'px'
    }"
  >
    <div class="logo">管理</div>
  </header>
</template>

<script setup>
import { ref, h, onMounted, computed } from "vue";
import Notification from "./Notification.vue";
import Head from "./Head.vue";
import Full from "./Full.vue";
import Setting from "./Setting.vue";
import { useThemeStore } from "@/stores/modules/theme.js";
import { useUserStore } from "@/stores/modules/user.js";
import { handlerDriver } from "./driverSteps.js";

const themeStore = useThemeStore();
const userStore = useUserStore();

const filterHUEdeg = computed(() => {
  return themeStore.logoHUESlider;
});

// onMounted(() => {
//   handlerDriver(userStore.getUserInformation);
// });
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: fit-content;
  padding: 0 20px;
  background-color: @mainLayout;
  color: #4e5969;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  .logo {
    filter: hue-rotate(0deg);
    .img {
      // width: 107px;
      height: 40px;
    }
  }

  .space {
    ::v-deep(.list) {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #f2f3f5;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
